<template>
	<view class="i-upLoad" :style="{marginTop: top, width: size,height: size, marginRight: right}" @click="handleClick">
		<image :style="{width: size,height: size}" v-if="modelValue" :src="modelValue" mode="widthFix"></image>
		<view class="plusempty" v-else>
			<image src="../../static/images/uploadAdd_icon.png" mode=""></image>
		</view>
		<image v-if="modelValue && !disabled" class="clones" @click.stop="removeImg"
			src="../../static/images/delete_icon1.png" mode="widthFix"></image>
	</view>
</template>

<script lang="ts" setup>
	import {
		ref,
		defineProps,
		defineEmits
	} from "vue";
	import {
		upload
	} from '../../api/index'
	import { getAppQX, showTost } from "../../utils/common";
	const props = defineProps({
		top: {
			type: String,
			default: '20rpx'
		},
		right: {
			type: String,
			default: '0'
		},
		size: {
			type: String,
			default: '120rpx'
		},
		modelValue: {
			type: String,
			default: ''
		},
		disabled: {
			type: Boolean,
			default: false
		},
		imageSize: {
			type: Number,
			default: 0
		}

	})
	const emit = defineEmits(['update:modelValue', 'success', 'remove'])
	const handleClick = () => {
		if (props.disabled) {
			return
		}
		if (!getAppQX('cameraAuthorized') || !getAppQX('albumAuthorized')) {
			return
		}
		uni.chooseImage({
			count: 1,
			sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
			sourceType: ['album', 'camera'],
			success: async (res) => {
				console.log(res, 'tempFilePathstempFilePathstempFilePaths');
				if (props.imageSize && props.imageSize * 1024 < res.tempFiles[0]?.size) {
					showTost('上传图片大小不得超过' + props.imageSize + 'k')
					return
				}
				const {
					data
				} = await upload(res.tempFilePaths[0])
				emit('update:modelValue', data)
				emit('success')
			}, fail: (e) => {
				console.log(e, 'err');
			}

		});
	}
	const removeImg = () => {
		emit('update:modelValue', '')
		emit('remove')
	}
</script>
<style lang="scss" scoped>
	.i-upLoad {
		background: $background-color;
		border-radius: 8rpx;
		@include flexCC;
		position: relative;

		image {
			border-radius: 8rpx;
		}

		.clones {
			width: 32rpx;
			height: 32rpx;
			position: absolute;
			right: 4rpx;
			top: 4rpx;
		}

		.plusempty {
			width: 28rpx;
			height: 28rpx;
			@include flexCC;

			image {
				width: 28rpx;
				height: 28rpx;
			}
		}
	}
</style>